<template>
  <div id="app">
    <!-- 顶部菜单按钮 -->
    <div class="menu" @click="reload">菜单</div>

    <div class="player-block">
      <div v-for="(player, index) in players" :key="index" :class="['player-item', player.positionCls, player.canuseCls(), player.selectedCls()]" @click="clickPlayer(player)">
        <span class="hpinfo number-info ">{{ player.hpInfo() }}</span>
        <div class="judge-area number-info">
          <div v-for="(item, index) in player.judgeAreas" :key="index"  :class="['judge-area-item', item.textColor, item.canuseCls(), item.selectedCls()]"  @click="clickEquipOrDelayJudge(item)">{{ item.brief }}</div>
        </div>
        <div class="player-info">{{ player.name }}</div>
        <div class="player-item-equipment equipment-area">
          <div v-for="(equip, index) in player.equipmentAreas" :key="index"  :class="['equipment-item', equip && equip.textColor, equip && equip.canuseCls(), equip && equip.selectedCls()]" @click="clickEquipOrDelayJudge(equip)">{{ equip ? equip.numberInfo + "  " + equip.cardInfo : " " }}</div>
        </div>
        <span class="card-number number-info">{{ player.handCardCount() }}</span>
      </div>
    </div>

    <div class="logging-block">
      <div class="desk-card">
        <div v-for="(item, index) in deskCards" :key="index" class="card-item">
          <div>
            {{ item.firstLine }}
          </div>
          <div>
            {{ item.nextLine }}
          </div>
          <div>
            {{ item.lastLine }}
          </div>
        </div>
      </div>
      <div v-for="(log, index) in displayLogs" :key="index" class="logging-line">{{ log }}</div>
    </div>


    <div class="select-area">
      <div class="select-title">
        <div class="title-content">国战选将</div>
      </div>
      <div class="select-grid-box">
        <div class="select-grid">
          <span class="grid-tags">蜀</span>
          <span class="grid-content">黄月英</span>
        </div>
        <div class="select-grid"></div>
        <div class="select-grid"></div>
        <div class="select-grid"></div>
        <div class="select-grid"></div>
        <div class="select-grid"></div>
        <div class="select-grid"></div>
      </div>
    </div>


    <!-- 底部提示文字 -->
    <div class="bottom-tip" v-show="tiptab.onshow">{{ tiptab.tiptxt }}</div>

    <!-- 确定/取消按钮 + 时间/元宝 -->
    <div class="action-buttons">
      <button class="btn confirm" @click="pushCard">确认/出牌</button>
      <button class="btn cancel" @click="popCard">取消/弃牌</button>
    </div>

    <!-- 主角区 -->
    <div class="mainrole-area">
      <div class="equipment-area">
        <div v-for="(equip, index) in mainRolePlayer.equipmentAreas" :key="index"  :class="['equipment-item', equip && equip.textColor, equip && equip.canuseCls(), equip && equip.selectedCls()]" @click="clickEquipOrDelayJudge(equip)">{{ equip ? equip.numberInfo + "  " + equip.cardInfo : " " }}</div>
      </div>
      <div class="handcard-area">
        <div v-for="(card, index) in mainRoleHandCards" :key="index" :class="['card-item', card.textColor, card.canuseCls(), card.selectedCls() ]" @click="clickCard(card)">
          <div>{{ card.numberInfo }}</div>
          <div>{{ card.cardInfo }}</div>
        </div>
      </div>
      <div class="player-intro">
        <div class="player-info"> {{ mainRolePlayer.name }}</div>
        <span class="hpinfo number-info ">{{ currentHP }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue';
import { useStore } from 'vuex'
import { PlayerView, CardView, ViewStoreDispather, EquipView, DelayBrilliantnessView } from './store/viewStore';
import { GameManager } from './core/gamesystem/gameManager';
import { WaitForPushCardEvent, createDefaultEvent } from './store/reactiveStore';

export default defineComponent({
  setup() {
    const store = useStore();

    // 点击玩家事件
    const clickPlayer = (pv: PlayerView) => {
      // 不可选
      console.log(pv)
      if (!pv.canPick) {
        return
      }
      const equipmentAreas = pv.equipmentAreas
      if (equipmentAreas.some(t => t && t.canPick)) {
        pv.selected = true
        return
      }

      // 取消选择
      if (pv.selected) {
        pv.pick()
        return
      }
      const selectedPlayerNum = ViewStoreDispather.selectedPlayerNum(store)
      const canPickMax = ViewStoreDispather.canPickMax(store)
      // 选中
      if (selectedPlayerNum < canPickMax) {
        pv.pick()
      }
    }

    // 选择卡牌事件
    const clickCard = (cv: CardView) => {

      if(!cv) {
        return
      }
      // 不可选
      if (!cv.canPick) {
        return
      }
      // 取消选择
      if (cv.selected) {
        cv.selectCard()
        return
      }
      
      const selectedCardNum = ViewStoreDispather.selectedCardNum(store)
      
      const canPickMax = ViewStoreDispather.canPickMax(store)
      // 选中
      if (selectedCardNum < canPickMax) {
        cv.selectCard()
      }
    }

    // 选择装备
    const clickEquipOrDelayJudge = (cv: EquipView | DelayBrilliantnessView) => {
      if(!cv) {
        return
      }
      // 不可选
      if (!cv.canPick) {
        return
      }
      // 取消选择
      if (cv.selected) {
        cv.selectCard()
        return
      }

      const canPickMax = ViewStoreDispather.canPickMax(store)
      let count = 0
      for(const equip of cv.owner.equipmentAreas) {
        if (equip && equip.selected) {
          count++
        }
      }
      for(const jgv of cv.owner.judgeAreas) {
        if (jgv.selected) {
          count++
        }
      }
      if (count < canPickMax) {
        cv.selectCard()
      }

    }

    // 确定按钮
    const pushCard = () => {
      const canPickMax = ViewStoreDispather.canPickMax(store)
      const canPickMin = ViewStoreDispather.canPickMin(store)
      let selectedCards = ViewStoreDispather.selectedCards(store)
      const selectedPlayers = ViewStoreDispather.selectedPlayers(store)
      const selectedEquipments = ViewStoreDispather.selectedEquipmentsAndDelayJudge(store)
      if (selectedPlayers.length > 0 && selectedEquipments.length > 0) {
        selectedCards = selectedCards.concat(selectedEquipments)
      }
      const enoughCard = selectedCards.length >= canPickMin && selectedCards.length <= canPickMax
      const enoughPlayer = selectedPlayers.length >= canPickMin && selectedPlayers.length <= canPickMax
      if (enoughCard || enoughPlayer) {
        const waitForButtonResolve = store.state.reactiveStore.waitForButton
        const event: WaitForPushCardEvent = createDefaultEvent({ selectedCards: selectedCards, selectedPlayers: selectedPlayers })
        waitForButtonResolve(event)
      } else {
        ViewStoreDispather.appendLog(store, '请选择满足数量的卡牌/玩家')
      }

    }

    // 取消按钮
    const popCard = () => {
      const waitForButtonResolve = store.state.reactiveStore.waitForButton
      const event: WaitForPushCardEvent = createDefaultEvent({ cancel: true })
      waitForButtonResolve(event)
    }

    // gm.run()
    let viewStore = store.state.viewStore
    let players = computed( () => viewStore.players)
    let mainRolePlayer = computed( () => viewStore.mainRolePlayer)
    let mainRoleHandCards = computed( () => viewStore.mainRoleHandCards)
    let displayLogs = computed(() => store.getters['viewStore/displayLogs'])
    let selectedCardNum = ViewStoreDispather.selectedCardNumComputed(store)
    let currentHP = computed(() => store.getters['viewStore/currentHP'])
    const deskCards = computed(() => viewStore.deskCards)
    const tiptab = computed(() => viewStore.tiptab)
    
    const gm = GameManager.create()
    onMounted(() => {
      gm.run()
    })

    const reload = () => {
      window.location.reload()
    }



    return {
      players,
      mainRolePlayer,
      currentHP,
      mainRoleHandCards,
      displayLogs,
      selectedCardNum,
      deskCards,
      tiptab,
      reload,
      clickPlayer,
      clickCard,
      clickEquipOrDelayJudge,
      pushCard,
      popCard
    };
  },
})

</script>

<style>
#app {
  height: 100%;
  font-size: 10px;
}

/* 顶部菜单按钮 */
.menu {
  width: 2vw;
  position: fixed;
  background-color: rgba(139, 69, 19, 0.8); /* 深棕色半透 */
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}


/* 上方武将槽位（5个格子） */
.player-block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  display: flex;
  justify-content: space-around;
  width: 90%;
  z-index: 10;
}
.player-item {
  width: 12vw;
  height: 15vw;
  background-color: rgba(255, 204, 153, 0.8); /* 浅橙色半透 */
  border: 2px solid #8B4513; /* 深棕色边框 */
  border-radius: 5px;
  position: relative;
}

.player-item-equipment {
  position: absolute;
  bottom: 0;
}

.player-item.player-item-left {
  position: absolute;
  left: -5%;
  top: 18vw;
}

.player-item.player-item-right {
  position: absolute;
  right: -5%;
  top: 18vw;
}

.number-info {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 14px;
}

.player-info {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
}

.player-item .judge-area {
  position: absolute;
  top: 0;
  left: 0;
}

.player-item .card-number {
  position: absolute;
  bottom: 0;
  right: 0;
}

.player-item .hpinfo {
  position: absolute;
  top: 0;
  right: 0;
}

.logging-block {
  position: absolute;
  top: 18vw;
  left: 15vw;
  width: 100%;
  height: 16vw;
  overflow: hidden;
}

.logging-block .desk-card {
  position: absolute;
  left: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.card-item {
  padding: 10px;
  border: 1px solid #ccc;
}

.select-area {
  display: none;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.select-area .select-title {
  position: relative;
  text-align: center;
  font-size: 14px;
  border: 2px solid #8B4513;
  border-bottom: 0;
  background-color: #ffcc99;
}

/* 武将选择格子区（网格布局） */
.select-grid-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列网格 */
  background-color: #ffcc99;
}

.select-grid {
  position: relative;
  width: 10vw;
  height: 5vw;
  border: 2px solid #8B4513;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: blue;
}

.select-grid .grid-tags {
  position: absolute;
  left: 0;
  top: 0;
}

/* 底部提示文字 */
.bottom-tip {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: yellow;
  text-shadow: 2px 2px 2px black; /* 文字阴影增强可读性 */
  background-color: #000;
}

/* 确定/取消按钮 + 时间/元宝 */
.action-buttons {
  position: absolute;
  bottom: 25%;
  right: 20%;
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.confirm {
  background-color: green; /* 确定按钮绿色 */
}
.cancel {
  background-color: red; /* 取消按钮红色 */
}


.mainrole-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12vw;
  background-color: rgba(255, 204, 153, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.handcard-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2px;
}


.equipment-area {
  width: 12vw;
  gap: 5px; /* 红色槽位间距 */
}
.equipment-item {
  height: 2vw;
  background-color: #CD5C5C; /* 深红色 */
  border: 1px solid #8B4513;
  border-radius: 3px;
}
.player-intro {
  position: relative;
  width: 12vw;
  height: 100%;
  border-left: 1px solid #8B4513;
}

.player-intro .hpinfo {
  position: absolute;
  top: 0;
  right: 0;
}

.redtxt {
  color: #d3163b;
}

.balcktxt {
  color: #000;
}

.canpick {
  background-color: #fff;
}

.disable {
  background-color: #ccc;
}

.selected {
  background-color: rgb(164, 241, 215);
}

</style>
